<template>
  <div class="bar-container">
    <a-card class="card">
      <div
        id="barChart"
        ref="barChart"
        :style="{ width: '100%', height: '100%' }"
      ></div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const barChart = ref(null);

// 线性表的配置项
const option = ref<EChartsOption>({
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  legend: {
    data: ["蒸发", "降水", "温度"],
  },
  xAxis: [
    {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "降水",
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: "{value} ml",
      },
    },
    {
      type: "value",
      name: "温度",
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: "{value} °C",
      },
    },
  ],
  series: [
    {
      name: "蒸发",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " ml";
        },
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
      ],
    },
    {
      name: "降水",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " ml";
        },
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
      ],
    },
    {
      name: "温度",
      type: "line",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + " °C";
        },
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(barChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.bar-container {
  margin: 10px;
  height: calc(100% - 60px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 12%);
    border-radius: 4px;
    :deep(.ant-card-body) {
      height: 100%;
    }
  }
}
</style>
